import React, { useEffect, useState } from "react"
import http from "../../utils/http"
import "./index.css"
import { useNavigate } from "react-router-dom"
function Index() {
  const navigate = useNavigate()
  // 接受数据的容器
  const [ticket, setTicket] = useState([])
  // 获取数据
  async function getCityData() {
    const result = await http.post("/trip/train", {
      start: "北京",
      end: "广州",
      page: 1,
    })
    console.log(result)
    const { data, code } = result.data
    if (code === 200) {
      setTicket(data)
    }
  }
  useEffect(() => {
    getCityData()
  }, [])
  return (
    <div>
      {ticket.length > 0 &&
        ticket.map((item, index) => (
          <div
            key={index}
            className="city_list"
            onClick={() => navigate("/detail", { state: item })}>
            <span>{item.start}</span>
            <span>{item.end}</span>
            <span>{item.startTime}</span>
            <span>
              二等座 <b>有票</b>
            </span>
            <span>
              一等座 <b>有票</b>
            </span>
            <span>
              商务座 <b>有票</b>
            </span>
          </div>
        ))}
    </div>
  )
}

export default Index
